<!-- 圆环状 -->
<template>
	<view class="charts-box">
		<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		comments:{
			qiunDataCharts
		},
		props: {
			titles: {
				type: String,
				default: '',
			},
			subtitles: {
				type: String,
				default: '',
			},
			//x轴标题是否旋转
			xRotateLabel: {
				type: Boolean,
				default: false
			},
			xRotateAngle: {
				type: Number,
				default: 0
			},
			colors: {
				type: Array,
				default: () => ["#91CB74", "#FAC858", "#1890FF", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4"],
			},
			seriesData: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				chartData: {},
				opts: {}
			};
		},
		watch: {
			seriesData(val) {
				this.getServerData();
			}
		},
		// created() {
		// 	this.getServerData();
		// },
		methods: {
			getServerData() {
				this.opts = {
					rotate: false,
					rotateLock: false,
					color: this.colors,
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "bottom",
						float: 'left',
						// lineHeight: 25,
						fontSize: 11,
						fontColor: '#333',
						itemGap: 4
					},
					title: {
						name: this.titles,
						fontSize: 16,
						color: "#7cb5ec"
					},
					subtitle: {
						name: this.subtitles,
						fontSize: 18,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				};

				setTimeout(() => {
					let res = {
						series: [{
							data: this.seriesData
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>